<template>
	<view class="app">
		<load :ready="ready"></load>

		<u-form :model="form" label-position="top" ref="uForm">
			<u-form-item label="用户类型" :required="true">
				<u-radio-group v-model="form.type">
					<u-radio v-for="(item, index) in typeList" :key="index" :name="item.value"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="name" :label="form.type==1 ? '用气单位名称':'真实姓名'" :required="true"><u-input v-model="form.name"
					placeholder="请输入" /></u-form-item>

			<u-form-item prop="mobile" label="电话号码"  :required="true"><u-input v-model="form.mobile"  readonly
					placeholder="请输入电话号码" /></u-form-item>
					
					
			<u-form-item  prop="address" label="请选择所在位置" :required="true">
				<u-input v-model="form.address" @click="openMap" placeholder="请选择所在位置" type="select" />
			</u-form-item>
			<u-form-item prop="address_detail" label="详细地址" :required="true"><u-input v-model="form.address_detail" placeholder="请输入详细地址"
					 /></u-form-item>
			<u-form-item  prop="if_elevator" label="您的住所是否装有电梯" :required="true">
				<u-radio-group v-model="form.if_elevator">
					<u-radio v-for="(item, index) in liftList" :key="index" :name="item.value"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- v-if="form.if_elevator==0" -->
			<u-form-item  prop="floor" label="所在楼层" :required="true"><u-input type="number"
					v-model="form.floor" placeholder="楼层费：步梯2楼收1元，2楼以上每层加收1元" /></u-form-item>
			<u-form-item label="您是否曾经通过96917下过单">
				<u-radio-group v-model="form.if_order">
					<u-radio v-for="(item, index) in isOrder" :key="index" :name="item.value" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<view class="btnbox">
				<u-button type="primary" shape="circle" @click="submit" :loading="isLoading"
					:custom-style="btnStyle">注册</u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	import titleMain from '@/components/base/title';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {
			titleMain
		},
		data() {
			return {
				navbar: {},
				ready: true,
				form: {
					type: 2,
					if_elevator: 1,
					if_order: -1,
					mobile:'',
				},
				btnStyle: this.$config.btnStyle,
				verCode: {
					text: '获取验证码',
					code: '',
					isDownIng: false,
					i: 60,
					t: null,
				},
				background: {
					backgroundColor: '#f7f7f7'
				},
				lineStyle: {
					right: '20rpx',
					bottom: '4px'
				},
				liftList: [{
						name: '有电梯',
						value: 1,
						disabled: false
					},
					{
						name: '没电梯',
						value: 0,
						disabled: false
					}
				],
				isOrder: [{
						name: '有',
						value: 1,
						disabled: false
					},
					{
						name: '没有',
						value: 0,
						disabled: false
					}
				],
				radio: '',
				switchVal: false,
				typeList: [{
						name: '商户',
						value: 1,
						disabled: false
					},
					{
						name: '家庭用户',
						value: 2,
						disabled: false
					}
				],
				addRes: {},
				isLoading: false,
				rules: {
					// 字段名称
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					name: [{
							required: true,
							message: '请输入真实姓名或用气单位名称',
							trigger: ['change', 'blur'],
						},
					],
					address: [{
							required: true,
							message:  '请选择地址',
							trigger: ['change', 'blur'],
						},
					],
					address_detail: [{
							required: true,
							message:  '请输入详细地址',
							trigger: ['change', 'blur'],
						},
					]
				}
			};
		},
		onLoad(o) {
			if(o.mobile){
				this.form.mobile = o.mobile;
			}
			that = this;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			// #ifdef H5
			this.$common.h5SetTitle('');
			// #endif
		},
		onUnload() {
			that = null
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			async submit() {
				console.log('submit')
				let istrue = true
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
						istrue = false
					}
				});
				console.log('istrue', istrue);
				if (!istrue) return
				this.isLoading = true
				let res = await this.$api.register({
					...this.form,
					
				});
				this.isLoading = false;
				console.log(res);
				if (res.data.code == this.$config.RESOK) {
					this.$common.showTip(res.data.msg);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/navbar/user'
						})
						// uni.navigateBack()
					}, this.$config.timeLoad);
				} else {
					this.$message.error(res.data.msg);
				}
			},
			//打开地图
			async openMap() {
				console.log('openMap----');
				const res = await this.$common.openMap();
				console.log('openMap');
				console.log(res);
				if (res) {
					this.$set(this.form, 'addressInfo',res)
					this.$set(this.form, 'address',res.address)
					// this.$set(this.form, 'latitude',res.latitude)
					this.$set(this.form, 'latitude',`${res.latitude},${res.longitude}`)
					this.$set(this.form, 'longitude',res.longitude)
					// let addRes = await this.$user.getAddCode({
					// 	lat: res.latitude,
					// 	lng: res.longitude
					// });
					// let data = Object.assign({
					// 		lat: res.latitude,
					// 		lng: res.longitude
					// 	},
					// 	addRes.ad_info, {
					// 		address: addRes.address
					// 	}
					// );
					// this.addRes = data;
					// const { lng, lat } = this.$common.qqMapTransBMap(data.lng, data.lat);
					// data.bdlng = lng;
					// data.bdlat = lat;
					// this.setUserLocation(data);
					// if (that.STATE == 1) return;
					// this.getInit();
				}
			},
			async getCode() {
				if (this.verCode.isDownIng) return
				this.downDate();
			},
			async getInit() {
				if (!this.rules.length) {
					const signTipsRes = await that.$api.signTips();
					if (signTipsRes.data.status == that.$config.RESOK) {
						this.rules = this.$common.normalRichText(signTipsRes.data.data.rules);
					}
				}
				if (this.verCode.isDownIng) return
				const res = await this.$api.sendRegCode({
					mobile: this.bindMobile,
				});
				if (res.data.status == this.$config.RESOK) {
					this.$common.showTip(res.data.msg, 'none');
					this.downDate();
				} else {
					this.$common.showTip(res.data.msg, 'none');
				}
			},
			downDate() {
				const slet = this;
				let i = slet.verCode.i;
				slet.verCode.t = setInterval(function() {
					slet.verCode.text = `${i}s后重发`;
					if (!slet.verCode.isDownIng) {
						slet.verCode.isDownIng = true;
					}
					i--;
					if (i == 0) {
						clearInterval(slet.verCode.t);
						slet.verCode.isDownIng = false;
						slet.verCode.text = '获取验证码';
					}
				}, 1000);
			},
			...mapActions([]),
		},
		computed: {
			getBtnStyle() {
				let style = {};
				if (this.verCode.isDownIng) {
					style = Object.assign({}, this.$config.btnStyle3, {
						height: '80rpx',
						lineHeight: '80rpx',
						fontSize: '13px',
						width: '30%'
					})
				} else {
					style = Object.assign({}, this.$config.btnStyle2, {
						height: '80rpx',
						lineHeight: '80rpx',
						fontSize: '13px',
						width: '30%'
					})
				}
				return style;
			},
			...mapState({
				userInfo: 'userInfo',
			})
		},

	};
</script>

<style scoped lang="scss">
	@import '@/common/css/login.scss';

	.app {
		padding: 0 30rpx;
	}

	.btnbox {
		padding: 30rpx 0;
	}
</style>